
<!DOCTYPE html>
<html>
<head>
<title>Toastmasters</title>


	<script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/DateTimeShortcuts.js"></script>

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/timepicker.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery.dialog2.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css" />
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery.min.js"></script>
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/bootbox.min.js"></script>
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-datepicker.js"></script>
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-timepicker.js"></script>
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery.controls.js"></script>
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery.form.js"></script>
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery.dialog2.js"></script>
<script rel="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery.dialog2.helpers.js"></script>

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

	<style type="text/css">
	      body {
	        padding-top: 60px;
	        padding-bottom: 40px;
	      }
	      .sidebar-nav {
	        padding: 9px 0;
	      }
	</style>

	<script rel="javascript" type="text/javascript">
		$(document).ready(function(){

			/* Confirm dialog box */
			$("a.confirm").click(function(e){
				e.preventDefault();
				var element = $(this);
				bootbox.confirm(element.attr('message'), function(confirmed) {
						if(confirmed) {
							window.location=element.attr('href');
						}
				})
			});

			$(".vDateField").datepicker({format:"yyyy-mm-dd"});
			$(".vTimeField").timepicker({
		                minuteStep: 5,
		                secondStep:60,
		                template: 'dropdown',
		                showSeconds: true,
		                showMeridian: false
		        });

		        $('table').tooltip({
				selector: "a[rel=tooltip]",
				placement: "right",
		    	});

	    		$("#add-role").click(function(event) {
	    			$("<div/>").dialog2({
	    				title:"Add New Role",
	    				content:"/toast/role_add/",
	    			});
	    			event.preventDefault();
	    		});


			$(document).ready(function(){
				$(":input:visible:enabled:first").focus();
			});

			$("input").popover(
				{
					trigger:"hover",
					delay:{show:500,hide:100}
				});

		});
	</script>

	{% block jquery %}{% endblock %}
</head>

<body>

<div id="wrapper">
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="/toast/meeting/">Toastmasters</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Create <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li class="nav-header">Create</li>
								<li><a href="/toast/meeting/"><i class="icon-plus"></i> Create Meeting...</a></li>
								<li><a href="/toast/member/"><i class="icon-plus"></i> Create Member...</a></li>
								<li class="divider"></li>
								<li><a href="/admin"><i class="icon-globe"></i> Administrator</a></li>
							</ul>
						</li>

						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Add <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li class="nav-header">Add</li>
								<li><a href="/toast/role/"><i class="icon-plus"></i> Role</a></li>
								<li><a href="/toast/address/"><i class="icon-plus"></i> Address</a></li>
								<li><a href="/toast/sound/"><i class="icon-plus"></i> Sound</a></li>
								<li><a href="/toast/participation_type/"><i class="icon-plus"></i> Participation Type</a></li>
								<li><a href="/toast/state/"><i class="icon-plus"></i> State</a></li>
							</ul>
						</li>

						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">View <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li class="nav-header">Views</li>
								<li><a href="/toast/meeting/"><i class="icon-eye-open"></i> Meetings</a></li>
								<li><a href="/toast/member/"><i class="icon-eye-open"></i> Members</a></li>
								<li class="divider"></li>
								<li><a href="/toast/role/"><i class="icon-eye-open"></i> Roles</a></li>
								<li><a href="/toast/address/"><i class="icon-eye-open"></i> Addresses</a></li>
								<li><a href="/toast/participation_type/"><i class="icon-eye-open"></i> Participation Types</a></li>
								<li><a href="/toast/state/"><i class="icon-eye-open"></i> States</a></li>
							</ul>
						</li>

						<li><a href="/toast/help/">Help</a></li>
						<li><a href="/toast/about/">About</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row-fluid">
			<ul class="breadcrumb">
				<li><a href="/toast/"><i class="icon-home"></i></a> <span class="divider">/</span></li>
				{% block breadcrumbs %}{% endblock %}
			</ul>
		</div>

		<div class="row-fluid">
			<div class="span3">
				<div class="well">
					{% block sidecontent %}{% endblock %}	
				</div>
			</div>

			<div class="span9">
				<div class="hero-unit">
					{% block content %}{% endblock %}
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>